<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            margin: 20px;
        }
    </style>
</head>
<body>
    <div>客服聊天</div>
  
    <div > <span><input type="text" id="keyword"></span> <span id="send_msg">发送消息</span> </div>
    <div id="close_msg">关闭链接</div>
    <div>消息展示区</div>
    <div id="msg"></div>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
   var   ws = new WebSocket("ws://39.97.248.254:8503");
    //申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
    ws.onopen = function(){
        console.log("启动成功")
    }
    ws.onmessage = function(e){
        console.log("收到数据",e.data);
        $('#msg').append("<div>"+e.data+"</div>");
    }
    ws.onclose = function(e){
        //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
        console.log("websocket已断开");
        $('#msg').append("<div>websocket已断开</div>");
    }
    ws.onerror = function(e){
        //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
        console.log("websocket发生错误"+JSON.stringify(e) );
    }
    $('#send_msg').click(function(){
        var id=$('#keyword').val()
        var data={
            id
        }
        ws.send(JSON.stringify(data))
    })
    $('#close_msg').click(function(){
        ws.close();
    })
</script>
</html>